<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane v-for="(item,index) in prop" :index="index" :key="item.name" :label="item.name" :value="index">
      <div>
        <el-row>
          <el-col :span="24" v-for="(articleItem,articleIndex) in item.posts"  :index="articleIndex" :key="articleItem.title">
            <nuxt-link :to="{name:'news-id',params:{newsId:3306,title:'嗡嗡嗡'}}">
            <el-card shadow="hover">
              <el-row :gutter="24">
                <el-col :span="7">
                  <img :src="articleItem.banner[0]" class="image">
                </el-col>
                <el-col :span="17">
                  <div class="text-left">
                    <h1>{{articleItem.title}}</h1>
                    <br>
                    <p>{{articleItem.des}}</p>
                  </div>
                </el-col>
              </el-row>
            </el-card>
            </nuxt-link>
          </el-col>
        </el-row>
      </div>
    </el-tab-pane>
  </el-tabs>
</template>
<script>
  export default {
    props: ['prop'],
    data() {
      return {
        activeName: '0'
      };
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      }
    }
  };
</script>
<style>
 .el-tabs {
     background: #fff;
     padding: 10px;
     box-sizing: border-box;
     margin-top: 20px;
 }
</style>
